import ScrollBarLayout from '@/components/ScrollBarLayout';
import { TypographyTitle } from '@/components/Typography';
import { AutoComplete, Card, Empty, Input } from 'antd';
import { ChangeEvent, useContext, useMemo } from 'react';
import { UserManageContext, UserOtherHandleContext } from '../hooks';
import { IUserDetailPosCard } from '../type';
import { SearchOutlined } from '@ant-design/icons';
import MyIcon from '@/components/MyIcon';

export const UserDetailPosCard: React.FC<IUserDetailPosCard> = ({
  posDataList, //要渲染的数据
}) => {
  const { userFixCls } = useContext(UserManageContext);

  const { userDetailSearchValue, userOthDispatch } = useContext(
    UserOtherHandleContext,
  );

  // 搜索下拉菜单
  const autoOptionPosCard = useMemo(() => {
    let option: Record<string, any>[] = [];
    const tileTreeData = (data: Record<string, any>[]) => {
      data?.forEach((item) => {
        if ((item?.name || item?.text)?.includes(userDetailSearchValue)) {
          // const name = item?.name || item?.text;
          // const nameLength = name?.length;
          // const select = name?.search(userDetailSearchValue);
          // const searchLength = userDetailSearchValue?.length;
          // const afterStr = name?.slice(0, select);
          // const selectStr = userDetailSearchValue;
          // const beforeStr = name?.slice(select + searchLength, nameLength);
          option.push({
            value: item?.name,
            key: item?.id,
            // label: (
            //   <div>
            //     <span>{afterStr}</span>
            //     <span style={{ color: '#f50' }}>{selectStr}</span>
            //     <span>{beforeStr}</span>
            //   </div>
            // ),
          });
        }
      });
    };
    tileTreeData(posDataList);
    return option;
  }, [posDataList, userDetailSearchValue]);

  // 点击搜索
  const onAutoSelectPos = (value: string, option: any) => {
    const optionId = option?.key;
    userOthDispatch({
      type: 'otherHandle-userDetailSearchValue',
      payload: value,
    });

    setTimeout(() => {
      scrollToAnchor(optionId);
    }, 1000);
  };

  // 搜索框改变
  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    userOthDispatch({
      type: 'otherHandle-userDetailSearchValue',
      payload: e.target.value,
    });
  };

  // 滚动定位
  const scrollToAnchor = (id: string) => {
    let anchorElement = document.getElementById(id + 'userInfoPos');
    if (id) {
      anchorElement?.scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'start',
      });
    }
  };

  return (
    <>
      <div style={{ padding: '15px 0px 10px 0px' }}>
        <TypographyTitle
          level={4}
          style={{
            margin: 0,
          }}
        >
          所属岗位
        </TypographyTitle>
      </div>
      <div className={userFixCls + 'userInfoPosStyle'}>
        <Card
          bordered
          title={
            <>
              <AutoComplete
                style={{ width: '100%' }}
                options={autoOptionPosCard}
                notFoundContent={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                onSelect={onAutoSelectPos}
              >
                <Input
                  suffix={<SearchOutlined />}
                  onChange={onInputChange}
                  placeholder="请按名称搜索"
                  allowClear={true}
                />
              </AutoComplete>
            </>
          }
        >
          <ScrollBarLayout
            style={{
              padding: '10px 10px',
              maxHeight: document.body.clientHeight * 0.3,
              minHeight: document.body.clientHeight * 0.2,
            }}
          >
            {posDataList?.length > 0 ? (
              <div className={userFixCls + 'userInfoPosStyle-detailCard'}>
                {posDataList?.map((item: any) => {
                  // let showTitle = searchChangeStyle(item);
                  const name = item?.name || item?.text;
                  const nameLength = name?.length;
                  const select = name?.search(userDetailSearchValue);
                  const searchLength = userDetailSearchValue?.length;
                  const afterStr = name?.slice(0, select);
                  const selectStr = userDetailSearchValue;
                  const beforeStr = name?.slice(
                    select + searchLength,
                    nameLength,
                  );
                  const title =
                    select > -1 && selectStr ? (
                      <div>
                        <MyIcon type={'icon-icon_lingdaopishi'} />
                        &nbsp;
                        {afterStr}
                        <span style={{ color: '#f50' }}>{selectStr}</span>
                        {beforeStr}
                      </div>
                    ) : (
                      <div>
                        <MyIcon type={'icon-icon_lingdaopishi'} />
                        &nbsp;
                        {item?.name}
                      </div>
                    );
                  return (
                    <div
                      className={
                        userFixCls + 'userInfoPosStyle-detailCardChild'
                      }
                      id={item?.id + 'userInfoPos'}
                      key={item?.id}
                    >
                      <div>{title}</div>
                    </div>
                  );
                })}
              </div>
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
          </ScrollBarLayout>
        </Card>
      </div>
    </>
  );
};
